<template>
	<view class="container" :style="{ minHeight: heightVal + 'px' }">
		<view class="nullBox"></view>
		<view class="items" v-for="(item, index) in 10" :key="index">
			<view class="itemtop">
				<view class="itemrow">
					<view class="rowleft">施工单位</view>
					<view class="rowright">湖南省通信建设</view>
				</view>
				<view class="itemrow">
					<view class="rowleft">施工队长</view>
					<view class="rowright">湖南省</view>
				</view>
				<view class="itemrow">
					<view class="rowleft">施工站址</view>
					<view class="rowright">湖南省通信建设临时架空光缆恢复</view>
				</view>
			</view>
			<view class="itembot">
				<u-button @click="toDetail()" class="btnStyle" type="primary">巡检</u-button>
				<u-button @click="toDetail()" class="btnStyle" type="primary">导航</u-button>
			</view>
		</view>
		<view class="nullBox2"></view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			heightVal: undefined,
			value: undefined,
			range: [
				{ value: 0, text: '篮球' },
				{ value: 1, text: '足球' },
				{ value: 2, text: '游泳' }
			]
		};
	},
	onLoad(option) {
		console.log(option);
		if (option.which) {
			uni.setNavigationBarTitle({ title: option.which });
		}
		this.heightVal = uni.getSystemInfoSync().windowHeight;
	},
	onShow() {},
	methods: {
		toDetail(type) {
			//导航
			// #ifdef APP-PLUS
			this.navigateToMap(28.10514, 112.99988, '湘天社区居委会');
			// #endif
		},

		//打开百度or高德地图
		// 跳转方法（传入纬度、经度、地点名称）
		navigateToMap(latitude, longitude, name) {
			console.log(111);
			// 1. 定义地图URL模板
			const maps = {
				amap: `androidamap://viewMap?sourceApplication=appname&poiname=${name}&lat=${latitude}&lon=${longitude}&dev=0`,
				baidu: `baidumap://map/marker?location=${latitude},${longitude}&title=${name}&content=${name}&coord_type=gcj02`
			};

			// 2. 检测应用是否安装
			const isAmapInstalled = plus.runtime.isApplicationExist({ pname: 'com.autonavi.minimap' });
			const isBaiduInstalled = plus.runtime.isApplicationExist({ pname: 'com.baidu.BaiduMap' });

			// 3. 优先跳转已安装的地图
			if (isAmapInstalled) {
				plus.runtime.openURL(encodeURI(maps.amap));
			} else if (isBaiduInstalled) {
				plus.runtime.openURL(encodeURI(maps.baidu));
			} else {
				uni.showToast({ title: '未安装相关地图应用', icon: 'none' });
			}
		},
		change(e) {
			console.log('e:', e);
		}
	}
};
</script>

<style lang="scss">
.container {
	background-color: #f4f4f4;

	.selBox {
		width: 690rpx;
		// height: 450rpx;
		border-radius: 20rpx;
		margin: 0 auto;
		background: #fff;
		box-sizing: border-box;
		padding: 26rpx;
		margin-bottom: 20rpx;

		.rowItem {
			width: 100%;
			height: 70rpx;
			line-height: 70rpx;
			margin-bottom: 20rpx;
			// background-color: pink;
			display: flex;
			font-size: 28rpx;

			::v-deep .uni-select {
				border-radius: 12rpx !important;
			}
		}
	}

	.items {
		width: 690rpx;
		min-height: 280rpx;
		border-radius: 20rpx;
		margin: 0 auto;
		background: #fff;
		box-sizing: border-box;
		padding: 26rpx;
		margin-bottom: 24rpx;

		.itemtop {
			font-size: 28rpx;
			border-bottom: 1rpx solid #f4f4f4;
			padding-bottom: 18rpx;
			margin-bottom: 20rpx;

			.itemrow {
				height: 46rpx;
				width: 100%;
				line-height: 46rpx;
				display: flex;
				justify-content: space-between;
			}
		}

		.btnStyle {
			border-radius: 12rpx;
			width: 120rpx;
			height: 60rpx;
			float: right;
			margin-left: 20rpx;
		}
	}
	.topBtnStyle {
		height: 70rpx;
		border-radius: 12rpx;
		margin-top: 20rpx;
	}

	.nullBox {
		height: 30rpx;
	}
	.nullBox2 {
		height: 80rpx;
	}
}
</style>
